<script src="https://unpkg.com/vue@next"></script>
<div id="app"></div>
<script>
    const {
        createApp,
        h,
        ref,
        onMounted,
        onUnmounted
    } = Vue
   const Mouse = {
            data() {
                return {
                    x: 0,
                    y: 0
                }
            },
            methods: {
                updated(e) {
                    this.x = e.pageX
                    this.y = e.pageY
                }
            },
            mounted() {
                window.addEventListener('mousemove', this.updated)
            },
            unmounted() {
                window.removeEventListener('mousemove', this.updated)
            },
            template:`<slot :x="x" :y="y">`,
            render() {
                return this.$slots.default&&this.$slots.default({
                    x:this.x,
                    y:this.y
                })
            }
        }

    function useMouse() {
        const x = ref(0)
        const y = ref(0)
        const update = e => {
            x.value = e.pageX
            y.value = e.pageY
        }
        onMounted(()=>{
            window.addEventListener('mousemove',update)
        }),
        onUnmounted(()=>{
            window.removeEventListener('mousemove',update)
        })
        return {x,y}
    }
    //不能解决真正的问题
    const App = {
       setup(){
         
          const foo = ref('foo')
          const { x, y } = useMouse() 
          
          return { foo, x,y}
       },

        template:`{{x}} {{y}}`
    }
    createApp(App).mount('#app')
</script>